<template>
    <div style="margin:20px auto;">
        <el-row justify="space-between">
            <el-col :span="3">
                <el-button color="#626aef" @click="isShowAdd=true">添加字典</el-button>
            </el-col>
        </el-row>
    </div>
    <el-table :data="UserConfigList" style="width: 100%" max-height="500px" border>
        <el-table-column label="序号" width="150" type="index"/>
        <el-table-column label="名称" prop="name" /> 
        <el-table-column label="父级序号" prop="parentsId" />
        <el-table-column label="父级名称" prop="parentsName" />
        <el-table-column align="left" label="操作">
            <template #default="scope">
                <el-button size="small" type="primary" @click="isShow = true, copyUserConfig(scope.row)">编辑</el-button>
                <el-button size="small" :disabled="scope.row.parentId == -1" type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 编辑视窗 -->
    <el-dialog v-model="isShow" title="编辑" width="400" center>
        <el-from :model="updata" label-width="auto" style="max-width: 600px">
            <el-form-item label="子类名称">
                <el-input v-model="updata.name" />
            </el-form-item>
            <el-form-item v-if="updata.parentId !=-1" label="父类名称">
                <el-select v-model="updata.parentId" placeholder="请选择父级">
                    <el-option v-for="item in dropList" :label="item.name" :value=item.id />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit()">修改</el-button>
                <el-button @click="isShow = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
    <!-- 添加视窗 -->
    <el-dialog v-model="isShowAdd" title="添加" width="400" center>
        <el-from :model="updata" label-width="auto" style="max-width: 600px">
            <el-form-item label="子类名称">
                <el-input v-model="addname" />
            </el-form-item>
            <el-form-item label="父类名称">
                <el-select v-model="addparentId" placeholder="请选择父级">
                    <el-option label="一级" value="-1" />
                    <el-option v-for="item in dropList" :label="item.name" :value=item.id />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitAdd()">添加</el-button>
                <el-button @click="isShowAdd = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
    <el-backtop :right="100" :bottom="100" />
</template>

<script>
import { userConfig, userConfigDel, userConfigAdd, userConfigUpdata, userConfigByType } from '@/views/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
export default {
    data() {
        return {
            UserConfigList: [],
            search: ref(''),
            isShow: ref(false),
            updata: {},
            dropList: [],
            isShowAdd: ref(false),
            addname: ref(''),
            addparentId: ref('')
        }
    },
    methods: {
        // 删除
        del(id) {
            userConfigDel({
                id: id
            }).then(res => {
                if (res.data.data) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success'
                    });
                    setTimeout(2000)
                    location.reload();
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                    setTimeout(2000)
                    location.reload();
                }
            })
        },
        // 拷贝对象
        copyUserConfig(item) {
            this.updata = Object.assign({}, item);
        },
        // 提交修改
        onSubmit() {
            // console.log(this.updata);
            userConfigUpdata({
                id: this.updata.id,
                name: this.updata.name,
                parentId: this.updata.parentId
            }).then(res => {
                if (res.data.data) {
                    this.isShow = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '修改成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '修改失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 添加
        onSubmitAdd() {
            // console.log(this.addparentId);
            userConfigAdd({
                name: this.addname,
                parentId: this.addparentId
            }).then(res => {
                if (res.data.data) {
                    this.isShowAdd = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '添加成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '添加失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        }
    },
    mounted() {
        // 数据列表
        userConfig().then(res => {
            this.UserConfigList = res.data.data;
        }),
            // 下拉框列表
            userConfigByType({ type: -1 }).then(res => {
                // console.log(res.data.data);
                this.dropList = res.data.data;
            })
    }
}
</script>

<style lang="scss" scoped></style>